<div class="plugin-container">
    <div class="plugin-grid">
        <!-- 短信登录插件卡片 -->
        <div class="plugin-card" onclick="showPluginConfigModal('sms')">
            <div class="plugin-info">
                <h3 class="plugin-title">短信登录</h3>
                <p class="plugin-subtitle">实现短信验证码登录功能，支持手机号快速登录</p>
            </div>
        </div>
        
        <!-- 钉钉登录插件卡片 -->
        <div class="plugin-card" onclick="showPluginConfigModal('dingtalk')">
            <div class="plugin-info">
                <h3 class="plugin-title">钉钉登录</h3>
                <p class="plugin-subtitle">实现钉钉扫码登录功能，支持企业内部应用集成</p>
            </div>
        </div>
        
        <!-- 微信登录插件卡片 -->
        <div class="plugin-card" onclick="showPluginConfigModal('wechat')">
            <div class="plugin-info">
                <h3 class="plugin-title">微信登录</h3>
                <p class="plugin-subtitle">实现微信扫码登录功能，支持公众号和开放平台集成</p>
            </div>
        </div>
        
        <!-- 飞书登录插件卡片 -->
        <div class="plugin-card" onclick="showPluginConfigModal('feishu')">
            <div class="plugin-info">
                <h3 class="plugin-title">飞书登录</h3>
                <p class="plugin-subtitle">实现飞书扫码登录功能，支持企业内部应用集成</p>
            </div>
        </div>

        <!-- 添加插件卡片 -->
        <div class="plugin-card add-plugin-card" onclick="showUploadPluginModal()">
            <div class="add-plugin-text">
                <h3>添加插件</h3>
                <p>点击上传自定义插件</p>
            </div>
        </div>
    </div>
</div>

<!-- 短信配置弹窗 -->
<div id="smsConfigModal" class="modal">
    <div class="modal-content modal-large">
        <div class="modal-header">
            <h3>短信登录</h3>
            <span class="close" onclick="hidePluginConfigModal('sms')">&times;</span>
        </div>
        <div class="modal-body" id="sms-config-container">
            <!-- 短信配置内容将动态加载到这里 -->
        </div>
    </div>
</div>

<!-- 钉钉配置弹窗 -->
<div id="dingtalkConfigModal" class="modal">
    <div class="modal-content modal-large">
        <div class="modal-header">
            <h3>钉钉登录</h3>
            <span class="close" onclick="hidePluginConfigModal('dingtalk')">&times;</span>
        </div>
        <div class="modal-body" id="dingtalk-config-container">
            <!-- 钉钉配置内容将动态加载到这里 -->
        </div>
    </div>
</div>

<!-- 微信配置弹窗 -->
<div id="wechatConfigModal" class="modal">
    <div class="modal-content modal-large">
        <div class="modal-header">
            <h3>微信登录</h3>
            <span class="close" onclick="hidePluginConfigModal('wechat')">&times;</span>
        </div>
        <div class="modal-body" id="wechat-config-container">
            <!-- 微信配置内容将动态加载到这里 -->
        </div>
    </div>
</div>

<!-- 飞书配置弹窗 -->
<div id="feishuConfigModal" class="modal">
    <div class="modal-content modal-large">
        <div class="modal-header">
            <h3>飞书登录</h3>
            <span class="close" onclick="hidePluginConfigModal('feishu')">&times;</span>
        </div>
        <div class="modal-body" id="feishu-config-container">
            <!-- 飞书配置内容将动态加载到这里 -->
        </div>
    </div>
</div>

<!-- 上传插件弹窗 -->
<div id="uploadPluginModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>上传自定义插件</h3>
            <span class="close" onclick="hideUploadPluginModal()">&times;</span>
        </div>
        <div class="modal-body">
            <form id="uploadPluginForm" enctype="multipart/form-data">
                <div class="form-row">
                    <div class="form-group">
                        <label for="plugin-name">插件名称 <span class="required">*</span></label>
                        <input type="text" id="plugin-name" name="plugin_name" class="form-input" placeholder="请输入插件名称" required>
                        <small class="form-help">用于显示在插件列表中</small>
                    </div>
                    <div class="form-group">
                        <label for="plugin-id">插件标识 <span class="required">*</span></label>
                        <input type="text" id="plugin-id" name="plugin_id" class="form-input" placeholder="请输入插件标识" pattern="[a-zA-Z_]+" required>
                        <small class="form-help">英文字母和下划线，用于目录命名</small>
                    </div>
                </div>
                <div class="form-group">
                    <label for="plugin-desc">插件描述</label>
                    <input type="text" id="plugin-desc" name="plugin_desc" class="form-input" placeholder="请输入插件描述">
                </div>
                <div class="form-group">
                    <label for="plugin-file">插件文件 <span class="required">*</span></label>
                    <input type="file" id="plugin-file" name="plugin_file" class="form-input" accept=".zip,.php" required>
                    <small class="form-help">支持 .zip 或 .php 文件</small>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" onclick="hideUploadPluginModal()">取消</button>
            <button type="button" class="btn btn-primary" onclick="uploadPlugin()">上传</button>
        </div>
    </div>
</div>
